<template>
	<div>
		<van-button  class='mat'  size="large" v-if='!isLogged'  color="#F688A4" to="/member"  type="primary">用户登录</van-button>
			<van-button  class='mat'  size="large" v-if='!isLogged'  color="#f68616" to="/register"  type="primary">用户注册</van-button>
		<template v-else>
			<!-- <!‐‐ 购物车列表 ‐‐> -->
				<div class="dizhi"><span class="didian">配送到{{dizhi}}</span></div> 
				<van-grid direction="horizontal" :column-num="1" icon-size="24px" class='yan'>
					<van-grid-item icon="cash-back-record" text="100%正品" />
					<van-grid-item icon="after-sale" text="天天打折" />
					<van-grid-item icon="logistics" text="退货无忧" />
				</van-grid>
				<!-- 购物车列表数据 -->
				
			<div class="shuju" v-for='(list,i) in cartList' :key="i" >		
					<van-swipe-cell :before-close="beforeClose" >
						<van-checkbox v-model="checked" @click='che(list)'  class='yuan'></van-checkbox>
						<van-card    :price="list.price" :desc="list.goodsName" :title="list.goodsName" class="goods-card"
						:thumb="list.picUrl" />
						<template #right>
							<van-button square text="删除" @click='op(list,i)'  type="danger" class="delete-button" />
						</template>	
						<van-stepper class='difel' @change="jinbu(list)"   v-model="list.value" step="1" />
					</van-swipe-cell>
					<!--  -->
		<!-- 购物车列表数据  end-->
		<van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
			<van-checkbox v-model="checked" @click='check()'>全选</van-checkbox>
			<template #tip>
				你的收货地址不支持同城送, <span @click="onClickEditAddress" style="color: aqua;">修改地址</span>
			</template>
		</van-submit-bar>
			 
			
			</div>
					
		</template>

	</div>


</template>

<script>
	import {
		Card,
		Button,
		Stepper,
		Checkbox,
		CheckboxGroup,
		SwipeCell,
		NavBar,
		Grid,
		GridItem,
		SubmitBar,
		Toast,
		Dialog 
	} from 'vant';
	import API from '../../utils/API.js'
	export default {
		data() {
			return {
				isLogged: this.$store.state.token ? true : false,
				token:'',
				value: 0,
				price: 2.00,
				qiang: null,
				dizhi: '南宁',
				result: [],
				title: '我是小猪佩奇',
				de: '描述信息数据',
				checked: ['a', 'b'],
				productIds:'',
cartList:[]

			}
		},
		components: {
			[Card.name]: Card,
			[Button.name]: Button,
			[Stepper.name]: Stepper,
			[Checkbox.name]: Checkbox,
			[CheckboxGroup.name]: CheckboxGroup,
			[SwipeCell.name]: SwipeCell,
			[NavBar.name]: NavBar,
			[Grid.name]: Grid,
			[GridItem.name]: GridItem,
			[SubmitBar.name]: SubmitBar,
			[Dialog.name]: Dialog,
		},
		methods: {
			check(){ //获取商品数量
			
				// let token =this.$store.state.token
				// this.$post(API.POST_CART_GOODSCOUNT).then(({data:{data}}) =>{console.log(res)})
			},
			
			che(e){ // // 选择或取消选择商品
				let token =this.$store.state.token
				this.$post(API.POST_CART_CHECKED,{
					token:token,
					productIds:[e.productIds],
					isChecked:e.deleted,
				})
				.then(res =>{
					console.log(res)
				})
				// console.log(e)
			},
			jinbu(e){//商品更新
				let token =this.$store.state.token
				console.log(e)
				this.$post(API.POST_CART_UPDATE,{  
					token:token,
					productId:e.productId,
					goodsId:e.goodsId,
					number:e.value,
					id:e.id
				})
				.then(res =>{
					console.log(res)
				})
				
			},
			onSubmit() {  
				//下单消息确认
			// let token =this.$store.state.token
			// 	this.$get(API.GET_CART_CHECKOUT,{
			// 		token:token,
					
			// 	})
				// this.$router.push({
				// 	name: 'cheng'
				// })
			},
			delete(){
				
			},
			onClickEditAddress() {
				this.$router.push({
					name: 'amend'
				})

			},
			
			 beforeClose({position, instance }) {
			      switch (position) {
			        case 'cell':
			        case 'outside':
			          instance.close();
			          break;
			        case 'right':
			          Dialog.confirm({
			            message: '确定删除吗？',
			          }).then(() => {
			             instance.close();
						 
						let token =this.$store.state.token
						this.$post(API.POST_CART_DELETE,{ //删除
							token:token,
						   productIds:this.productIds
						})
						.then(res => {
							this.refresh()//页面刷新
						})
			          });
			          break;
			      }
			    },
				op(e){ //点击获取商品规格id
					this.productIds = [e.productId]
					console.log(this.productIds)
				},
				refresh(){ //页面刷新提示
					this.$router.go(0);
					Toast.loading({
					  message: '删除中...',
					  forbidClick: true,
					  loadingType: 'spinner',
					});
				}


		},
		created() {
		 // console.log(this.$store.state.token) 
			// console.log(this.isLogged) 
		if(this.isLogged){
			let token =this.$store.state.token
			
			this.$get(API.GET_CART_INDEX,token)
			.then(res =>{
				for(let i=0;i<res.data.data.cartList.length;i++){
					  this.productIds=res.data.data.cartList[i].productId//当前商品指定规格的商品ID
				};
				
				this.cartList=res.data.data.cartList
				
			  console.log( this.cartList)
				
			 console.log( res.data.data)
				//   console.log( this.cartList)
				
						
			})
			
		}else{
			Toast('需要登录才能显示');
		}
	
				
		},
		computed: {

		}
	}
</script>

<style>
	.yuan{
		position: absolute;
		top: 35px;
		z-index: 1;
		margin-left: 2px;
	}
	
	.van-swipe-cell{
		position: relative;
		padding-left: 12px;
		
	}
	.mat{
		height:70px;
	}
	body {
		background-color: #f3f4f5;
	}

	.gwc {
		display: block;
		text-align: center;
	}

	.difel {
		display: flex;
		justify-content: flex-end;
		margin-right: 20px;
		align-items: center;

	}

	.didian {
		color: #98989f;
		font-size: 14px;
	}

	.dizhi {
		display: flex;
		justify-content: center;
		width: 100%;

		padding: 15px 0 15px;
		background-color: #FFFFFF;
		margin-bottom: 8px;
	}

	.bai {
		width: 100%;
	}

	.delete-button {
		height: 100%;
	}

	.goods-card {
		margin: 0;
		background-color: @white;
	}

	.van-grid {
		flex-wrap: nowrap;
	}

	.yan {
		color: #F688A4;
	}

	.shuju {
		display: flex;
		background-color: #fafafa;
		padding: 10px 0 10px;
	}

	.van-swipe-cell {
		flex: 1;
	}

	.van-submit-bar {
		bottom: 58px;
	}
</style>
